<template>
	<view class="passenger-flow">
		<view class="time-info">
			<text>{{ year }}年{{ month }}月{{ day }}日 {{ week }}</text>
			<text>{{ hour }}:{{ minute }}:{{ second }}</text>
		</view>
		<view class="competition-info">
			<view class="info-item">
				<u-icon name="integral-fill" size="16" color="#999" />
				<text style="font-size: 24rpx;">男子100米自由泳/ 第3组第2场</text>
			</view>
			<view class="info-item">
				<u-icon name="clock" size="16" color="#999" />
				<text style="font-size: 24rpx;">2024-03-15 14:30</text>
			</view>
			<view class="info-item">
				<u-icon name="map" size="16" color="#999" />
				<text style="font-size: 24rpx;">奥体中心游泳馆</text>
			</view>
			<view class="info-item">
				<u-icon name="checkbox-mark" size="16"  :color="pltype == 1 ? '#4CAF50' : '#999'"/>
				<text style="font-size: 24rpx;margin-right: 20rpx;" :class="{ active: pltype == 1 }">待检录</text>
				<text style="font-size: 24rpx;" v-if="plshow">待开赛</text>
				<text style="font-size: 24rpx;" class="active" v-if="!plshow">比赛开始</text>
			</view>
		</view>
		<view class="player-list">
			<view v-for="(player, index) in players" :key="index" class="ugriditem" @click="onplayers">
				<view>
					<image :src="player.image" style="width: 140rpx; height: 120rpx; margin-bottom: 8rpx;" />
					<view class="" style="position: absolute; top: 80rpx; right: 10rpx;z-index: 9;"
						v-if="player.type == pltype">
						<u-icon name="checkmark-circle" size="24" color="#4CAF50" />
					</view>
					<text style="font-size: 22rpx;">{{ player.lane }}道</text>
					<text style="font-size: 22rpx;">{{ player.name }}</text>
					<text style="font-size: 22rpx;">{{ player.age }}岁</text>
					<text style="font-size: 22rpx;">{{ player.team }}</text>
				</view>
			</view>
		</view>
		<view class="" style="position: fixed;bottom: 300rpx;z-index: 99;width: 100%;background-color: #fff;" v-if="istime">
			<view class="countdown-section">
				<view class="countdown">等待开始</view>
				<view class="countdown-time">{{ formatTime(reTotalTime) }}</view>
			</view>
		</view>

		<view class="d-flex flex-row justify-space-between justify-center align-center"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 99;">
			<view class="" @click="startRace" v-if="plshow"
				style="width: 45%;height: 80rpx;background: #3d6aff;color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				检录完成
			</view>
			<view class="" v-if="!plshow"
				style="width: 45%;height: 80rpx;background: #e2e2e2;color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				检录完成
			</view>
			<view class="" v-if="plshow"
				style="width: 45%;height: 80rpx;background: #e2e2e2;color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				开始发令
			</view>
			<view class="" @click="toggleTimer" v-if="!plshow"
				style="width: 45%;height: 80rpx;background: #4CAF50;color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				{{ isPaused? '开始发令' : '暂停' }}
			</view>
		</view>
	</view>
</template>

<script>
	const personal = require("@/api/personal/index.js");
	const venues = require("@/api/venues/venues.js");

	export default {
		data() {
			return {
				year: '',
				month: '',
				day: '',
				week: '',
				hour: '',
				minute: '',
				second: '',
				competitionInfo: {
					event: "男子100米自由泳",
					group: "第3组第2场",
					time: "2024-03-15 14:30",
					venue: "奥体中心游泳馆"
				},
				players: [{
						lane: "1",
						name: "陈俊杰",
						age: "16岁",
						team: "广东省游泳队",
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						type: 1
					},
					{
						lane: "2",
						name: "刘志豪",
						age: "15岁",
						team: "浙江省游泳队",
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67dfcaa84db07.jpeg",
						type: 1
					},
					{
						lane: "2",
						name: "刘志豪",
						age: "15岁",
						team: "浙江省游泳队",
						image: "https://sass-test.doit10019.com/upload/202504/01135253-46765706845219986.png?attname=qiquan.png",
						type: 2
					},
					{
						lane: "2",
						name: "刘志豪",
						age: "15岁",
						team: "浙江省游泳队",
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67dfcaa84db07.jpeg",
						type: 1
					},
					{
						lane: "2",
						name: "刘志豪",
						age: "15岁",
						team: "浙江省游泳队",
						image: "https://sass-test.doit10019.com/upload/202504/01135253-46765706845219986.png?attname=qiquan.png",
						type: 2
					},
					{
						lane: "2道",
						name: "刘志豪",
						age: "15岁",
						team: "浙江省游泳队",
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67dfcaa84db07.jpeg",
						type: 1
					},
					{
						lane: "2道",
						name: "刘志豪",
						age: "15岁",
						team: "浙江省游泳队",
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67dfcaa84db07.jpeg",
						type: 1
					},
					{
						lane: "2",
						name: "刘志豪",
						age: "15岁",
						team: "浙江省游泳队",
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67dfcaa84db07.jpeg",
						type: 1
					}
				],
				plshow: true,
				pltype: '',
				totalTime: 0,
				segments: [],
				timerId: null,
				isPaused: true,
				reTotalTime: 0,
				pauseStartTime: null,
				istime:false
			};
		},
		onLoad(options) {

		},
		mounted() {
			this.updateTime();
			setInterval(() => {
				this.updateTime();
			}, 1000);
		},
		methods: {
			formatTime(milliseconds) {
				const totalSeconds = Math.floor(milliseconds / 1000);
				const hours = Math.floor(totalSeconds / 3600);
				const minutes = Math.floor((totalSeconds % 3600) / 60);
				const seconds = totalSeconds % 60;
				const ms = milliseconds % 1000;
				// return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${ms.toString().padStart(3, '0').substr(0, 2)}`;
				return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${ms.toString().padStart(3, '0').substr(0, 2)}`;
			},
			toggleTimer() {
				this.isPaused = !this.isPaused;
				this.istime = true
				if (!this.isPaused) {
					const now = Date.now();
					if (this.pauseStartTime) {
						const pauseDuration = now - this.pauseStartTime;
						this.reTotalTime += pauseDuration;
					}
					this.timerId = setInterval(() => {
						this.totalTime += 10;
						this.reTotalTime += 10;
					}, 10);
					this.pauseStartTime = null;
				} else {
					this.pauseStartTime = Date.now();
					clearInterval(this.timerId);
				}
			},
			updateTime() {
				const now = new Date();
				this.year = now.getFullYear();
				this.month = String(now.getMonth() + 1).padStart(2, '0');
				this.day = String(now.getDate()).padStart(2, '0');
				const dayOfWeek = now.getDay();
				switch (dayOfWeek) {
					case 0:
						this.week = '周日';
						break;
					case 1:
						this.week = '周一';
						break;
					case 2:
						this.week = '周二';
						break;
					case 3:
						this.week = '周三';
						break;
					case 4:
						this.week = '周四';
						break;
					case 5:
						this.week = '周五';
						break;
					case 6:
						this.week = '周六';
						break;
				}
				this.hour = String(now.getHours()).padStart(2, '0');
				this.minute = String(now.getMinutes()).padStart(2, '0');
				this.second = String(now.getSeconds()).padStart(2, '0');
			},
			onplayers() {
				console.log("开始发令");
				if(this.pltype == 1){
					uni.navigateTo({
						url: './timing'
					})
				}else{
					uni.showToast({
						title: '请等待检录！',
						icon: 'none',
						duration: 1000
					});
				}
				
			},
			startRace() {
				this.pltype = 1
				this.plshow = false
			},
		}
	};
</script>

<style lang="scss" scoped>
	.passenger-flow {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f1f1f1;
		padding: 20rpx;
	}

	.time-info {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.time-info text:first-child {
		font-size: 32rpx;
		color: #007AFF;
	}

	.time-info text:last-child {
		font-size: 36rpx;
		color: #007AFF;
		font-weight: 500;
	}

	.competition-info {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx 24rpx;
		margin-bottom: 24rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.info-item u-icon {
		margin-right: 16rpx;
		color: #999;
	}

	.info-item text {
		font-size: 28rpx;
		color: #666;
	}

	.active {
		color: #4CAF50 !important;
	}

	.status-tag {
		margin-left: 16rpx;
		padding: 8rpx 20rpx;
		border-radius: 24rpx;
		font-size: 24rpx;
	}

	// .status-tag:first-child {
	// 	background: #FFF5CC;
	// 	color: #FF9900;
	// }

	// .status-tag:last-child {
	// 	background: #FFF0F0;
	// 	color: #FF4D4F;
	// }

	.player-list {
		// flex: 1;
		// overflow-y: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.ugriditem {
		position: relative;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 10rpx;
		margin-bottom: 20rpx;
		width: 160rpx;
		margin-left: 18rpx;
	}

	.player-card {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.player-card text:first-child {
		font-size: 24rpx;
		color: #333;
		margin-bottom: 4rpx;
	}

	.player-card text:nth-child(2) {
		font-size: 22rpx;
		color: #666;
		margin-bottom: 2rpx;
	}

	.player-card text:nth-child(3),
	.player-card text:nth-child(4) {
		font-size: 20rpx;
		color: #999;
	}

	.countdown-section {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		text-align: center;
		width: 96%;
	}

	.countdown {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.countdown-time {
		font-size: 40rpx;
		color: #666;
		font-weight: 700;
	}

	.start-btn {
		background-color: #4CAF50;
		color: #fff;
		padding: 30rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40%;
		margin-bottom: 20rpx;
	}
</style>